<!-- 文件管理系统-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件管理系统</title>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <style>
        body {
            padding: 15px;
            background-color: #f2f2f2;
        }
        .layui-card {
            border-radius: 5px;
            box-shadow: 0 1px 6px rgba(0,0,0,.1);
        }
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            border-bottom: 1px solid #f0f0f0;
            padding: 15px;
        }
        .layui-table-view {
            margin: 0;
            box-shadow: none;
            border-radius: 0 0 5px 5px;
        }
        .layui-table td, .layui-table th {
            padding: 12px 15px;
        }
        .layui-form-label {
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        .layui-btn-container {
            padding: 10px 15px;
            background-color: #fff;
            border-radius: 5px 5px 0 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .file-name {
            color: #1E9FFF;
        }
        .file-actions .layui-btn {
            margin-right: 5px;
        }
        .file-upload-btn {
            margin-left: 10px;
        }
        .file-list-name {
            margin-left: 10px;
            color: #666;
        }
    </style>
</head>
<body>

<div class="layui-card">
    <div class="layui-card-header">文件管理</div>
    <div class="layui-card-body">
        <script type="text/html" id="file-update">
            <form class="layui-form" style="padding: 20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input id="file-update-title" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea id="file-update-description" name="desc" placeholder="请输入内容" class="layui-textarea" style="min-height: 100px;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">附件</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" id="test1" onclick="javascript:$('input[name=\'file\']').click();">
                            <i class="layui-icon">&#xe67c;</i>更改附件
                        </button>
                        <span class="file-list-name" id="file-update-list"></span>
                        <input type="file" style="display: none;" onchange="onUpdateFile(this);" name="file">
                    </div>
                </div>
            </form>
        </script>

        <script type="text/html" id="file-insert">
            <form class="layui-form" style="padding: 20px;">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input id="file-title" type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <textarea id="file-description" name="desc" placeholder="请输入内容" class="layui-textarea" style="min-height: 100px;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">附件</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-normal" id="test1" onclick="javascript:$('input[name=\'file\']').click();">
                            <i class="layui-icon">&#xe67c;</i>添加附件
                        </button>
                        <span class="file-list-name" id="file-list"></span>
                        <input type="file" style="display: none;" onchange="onChangeFile(this);" name="file">
                    </div>
                </div>
            </form>
        </script>

        <table class="layui-hide" id="file-table" lay-filter="file-table"></table>

        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal" lay-event="addFile">
                    <i class="layui-icon layui-icon-upload"></i> 上传文件
                </button>
            </div>
        </script>

        <script type="text/html" id="barTpl">
            <div class="file-actions">
                <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">
                    <i class="layui-icon layui-icon-edit"></i> 编辑
                </a>
                <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="download" id="download-btn">
                    <i class="layui-icon layui-icon-download"></i> 下载
                </a>
                <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
                    <i class="layui-icon layui-icon-delete"></i> 删除
                </a>
            </div>
        </script>
    </div>
</div>

<script>
    var realUUIDname = "";
    var originalFilename = "";
    layui.use(['table', 'form'], function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#file-table',
            url:'/files/',
            toolbar: '#toolbar',
            parseData: function (res) {
                console.log(res);
                return {
                    "code": 0,
                    "msg": "",
                    "count": res.size,
                    data: res.data
                }
            },
            cols: [[
                {field:'id', width:80, title: 'ID', sort: true},
                {field:'title', width:200, title: '文件名称', edit: true, templet: function(d){
                        return '<span class="file-name">'+d.title+'</span>';
                    }},
                {field:'description', width:300, title:'描述', edit: true},
                {field:'username', width:150, title: '创建者'},
                {field:'createdTime', width:180, title: '创建时间', sort: true},
                {field:'filename', width: 120, title: '文件名', hide: true},
                {fixed: 'right', width:220, align:'center', toolbar: '#barTpl'}
            ]],
            page: true,
            text: {
                none: '暂无文件数据'
            },
            skin: 'line',
            even: true
        });

        onUpdateFile = function (obj) {
            var file = obj.files[0];
            console.log(file);
            var formData = new FormData();
            formData.append("file", file);
            $.ajax({
                url: '/files/upload/',
                method: 'post',
                data: formData,
                async: false,
                cache: false,
                processData:false,
                contentType:false,
                success:function(res) {
                    console.log(res);
                    if (res.code == 200) {
                        originalFilename = file.name;
                        $("#file-update-list").text(originalFilename);
                        realUUIDname = res.data;
                        console.log('更改后: ' + realUUIDname);
                        layer.tips('更改附件成功', '#file-update-list', {
                            tipsMore: true
                        });
                    } else {
                        layer.tips('更改附件失败', '#file-update-list', {
                            tipsMore: true
                        });
                    }
                }
            });
        },
            onChangeFile = function (obj) {
                var file = obj.files[0];
                console.log(file);
                var relativePath = 'work/' + $("select[name='class']").val();
                var formData = new FormData();
                formData.append("file", file);
                formData.append("relativePath", relativePath);
                $.ajax({
                    url: '/files/upload/',
                    method: 'post',
                    data: formData,
                    async: false,
                    cache: false,
                    processData:false,
                    contentType:false,
                    success:function(res) {
                        console.log(res);
                        if (res.code == 200) {
                            $("#file-list").text(file.name);
                            originalFilename = file.name;
                            realUUIDname = res.data;
                            layer.tips('附件上传成功', '#file-list', {
                                tipsMore: true
                            });
                        } else {
                            layer.tips('附件上传失败', '#file-update-list', {
                                tipsMore: true
                            });
                        }
                    }
                });
            }

        // 上方工具条监听
        table.on('toolbar(file-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            switch(obj.event){
                case 'addFile':
                    layer.open({
                        btn: '上传',
                        title: '文件上传',
                        content: $("#file-insert").text(),
                        offset: 'c',
                        area: ["500px", "400px"],
                        yes: function () {
                            var title = $("#file-title").val();
                            var description = $("#file-description").val();
                            if (title.length <= 0  || description.length <= 0) {
                                if (title.length <= 0) {
                                    layer.tips('标题不能为空', '#file-title',  {
                                        tipsMore: true
                                    });
                                }
                                if (description.length <= 0) {
                                    layer.tips('描述不能为空', '#file-description', {
                                        tipsMore: true
                                    });
                                }
                                console.log(realUUIDname);
                                if (realUUIDname.length <= 0) {
                                    layer.tips('未选择文件', '#test1', {
                                        tipsMore: true
                                    });
                                }
                            } else {
                                var nowDate = new Date();
                                var empId = "${(user.id)!''}";
                                var username = "${(user.username)!'test'}";
                                $.ajax({
                                    url: '/files',
                                    method: 'post',
                                    data: {
                                        title: title,
                                        description: description,
                                        path: realUUIDname,
                                        filename: originalFilename,
                                        username: username,
                                        createdTime: nowDate
                                    },
                                    success: function (res) {
                                        console.log(res);
                                        if (res.code == 200) {
                                            var dataBak = [];
                                            var tableBak = table.cache['file-table'];
                                            for (var i = 0; i < tableBak.length; i++) {
                                                dataBak.push(tableBak[i]);
                                            }
                                            dataBak.push({
                                                title: $("#file-title"),
                                                content: $("#file-description"),
                                                path: realUUIDname,
                                                filename: originalFilename,
                                                username: username,
                                                createdTime: nowDate
                                            });
                                            table.reload("file-table",{
                                                data:dataBak
                                            });
                                            layer.msg('上传文件成功', {icon: 1});
                                        } else {
                                            layer.msg('上传文件失败', {icon: 2});
                                        }
                                    }
                                });
                            }
                        }
                    });
            }
        });

        //监听工具条(右侧)
        table.on('tool(file-table)', function(obj){
            var data = obj.data;
            var layEvent = obj.event;
            var tr = obj.tr;
            if(layEvent === 'del'){
                layer.confirm('删除文件' + data.title + '?', {skin: 'layui-layer-molv',offset:'c', icon:'0'},function(index){
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        url: '/files/' + data.id,
                        type: 'delete',
                        success: function (res) {
                            console.log(res);
                            if (res.code == 200) {
                                layer.msg('删除成功', {icon: 1, skin: 'layui-layer-molv', offset:'c'});
                            } else {
                                layer.msg('删除失败', {icon: 2, skin: 'layui-layer-molv', offset:'c'});
                            }
                        }
                    })
                });
            } else if(layEvent === 'edit'){
                layer.open({
                    btn: '保存',
                    title: '编辑文件: ' + data.title,
                    content: $("#file-update").text(),
                    offset: 'c',
                    area: ["500px", "400px"],
                    success: function () {
                        originalFilename = data.filename;
                        $("#file-update-title").val(data.title);
                        $("#file-update-description").text(data.description);
                        $("#file-update-list").text(originalFilename);
                    },
                    yes: function () {
                        $.ajax({
                            url: '/files',
                            method: 'put',
                            data: JSON.stringify({
                                id: data.id,
                                title: $("#file-update-title").val(),
                                path: realUUIDname,
                                description: $("#file-update-description").val(),
                                filename: originalFilename
                            }),
                            contentType: "application/json",
                            success: function (res) {
                                console.log(res);
                                if (res.code == 200) {
                                    layer.msg('更改信息成功', {icon: 1});
                                    obj.update({
                                        title: $("#file-update-title").val(),
                                        description: $("#file-update-description").val(),
                                        filename: originalFilename
                                    });
                                } else {
                                    layer.msg('更改信息失败', {icon: 2});
                                }
                            }
                        });
                    }
                });
            } else if(layEvent === 'download'){
                console.log(data.id);
                window.location.href = "/files/download/" + data.id;
            }
        });
    });
</script>

</body>
</html>